<template>
	<div v-if="contentLoaded" style="background: #fff">
        <Search></Search>
        <div style="margin-top: 1rem">
            <!-- 左侧导航条 -->
            <div id="tab_container">
                <div class="tab-item" v-for="cate in categories"
                :key="cate.class_id"
                :class="{active: activeCate == cate.class_id}"
                @click="clickTab(cate.class_id)">
                    {{cate.class_name}}
                </div>
            </div>
            ----<pre>{{allGoods}}</pre>----
            <!-- 右侧全部商品 -->
            <div id="goods_container">
                <div class="list-wrapper" v-for="list in allGoods"
                :key="list.class.class_id"
                ref="list">
                    <p class="c-txt cate-title">{{list.class.class_name}}</p>
                    <GoodsItem v-for="goods in list.goods_list"
                    :key="goods.pre_goods_id"
                    :goods="goods" :cartShow="true"></GoodsItem>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Search from '@/components/Search'
import GoodsItem from '@/components/GoodsItem2'
import goods from '@/api/goods'
import { mapGetters, mapActions } from 'vuex'
import { Indicator } from 'mint-ui'
export default{
    name:'Category',
    async created(){
        await this.getCategories()
        let data
        Indicator.open()
        try {
            data = await Promise.all(
                this.categories.map(cate => {
                    return goods.getGoodsList({
                        classId: cate.class_id,
                        classAppendId: 0,
                        page: 0
                    })
                })
            )
        } catch(err) {

        }
        this.sortList(data)
        Indicator.close()
        this.contentLoaded = true
    },
    data(){
        return{
            contentLoaded: false,
            activeCate: '',
            allGoods: [],
            topData: []
        }
    },
    computed:{
        ...mapGetters({
            categories: 'goods/categories'
        })
    },
    methods:{
        ...mapActions({
            getCategories: 'goods/getCategories',
        }),
        // 记录各板块距离顶部的高度
        updateTopData(){
            Array.from(document.querySelector('.list-wrapper'))
        },
        elevator(){
            window.addEventListener('scroll', () => {
                const trueTop = window.scrollY
                // 倒着数 一旦某一list的top比当前鼠标top矮 那么这一list就是目标list
                for(var i = this.topData.length-1; i>=0 ; i--) {
                    // console.log(trueTop)
                    if(this.topData[i].top < trueTop) {
                        this.activeCate = this.topData[i].id
                        break
                    }
                }
            }, false)
        },
        sortList(data){
           this.allGoods = data.map((d,i) => {
                d.data.class = this.categories[i]
                return d.data
            })
            // this.$nextTick(() => {
            //     console.log(document.querySelector('.list-wrapper'))
            //     console.log(this.$refs)
            //     console.log(this.$refs.list)    
            // })
            setTimeout(() => {
                this.$refs.list.forEach((e,i) => {
                    this.topData.push({
                        top: e.getBoundingClientRect().top,
                        id: this.allGoods[i].class.class_id
                    })
                })
                this.elevator()
            },100)
        },
        clickTab(classId) {
            this.activeCate = classId
            console.log(this.topData.find(d => d.id == classId).top)
            window.scrollTo(0, this.topData.find(d => d.id == classId).top+100)
        }
    },
    components: {Search, GoodsItem}
}
</script>
<style lang='less' scoped>
#tab_container{
    position: fixed;
    left: 0;
    width: 24%;
    height: 15.2rem;
    .tab-item{
        width: 2.4rem;
        height: 1.49rem;
        line-height: 1.49rem;
        text-align: center;
        background: #f2f2f2;
        border: 1px solid #d3d3d3;
        color: #5c5c5c;
        font-size: .32rem;
        display: block;
        &.active{
            border: none;
            color: #fb4a4a;
            background: #fff;
        }
    }
}
#goods_container{
    width: 75%;
    display: inline-block;
    vertical-align: top;
    margin-left: 25%;
    .cate-title{
        padding-left: .1rem;
        border-left: 5px solid #fb4a4a;
        margin-left: .1rem;
        margin-top: .5rem;
        margin-bottom: .2rem;
    }
}
</style>